import React, { useEffect, useReducer } from 'react';

// 1. 创建组件的初始状态
const initState = {
  bannerList: [],
  proList: []
}
// 2. 创建修改 state 的事件 reducer
const reducer = (state,action)=>{
  switch (action.type) {
    case 'change-banner-list':
    // 返回一个新的状态
    return {...state, bannerList: action.payload}

    case 'change-pro-list':
    return {...state, proList: action.payload}

    default:
      return state
  }
}

const App = () => {

  const [state, dispatch] = useReducer(reducer, initState)

  useEffect(()=>{
    fetch('http://121.89.205.189:3000/api/banner/list').then(res => res.json()).then(res => {
      // console.log(res);
      dispatch({
        type: 'change-banner-list',
        payload: res.data
      })
    })
  }, [])




  useEffect(()=>{
    fetch('http://121.89.205.189:3000/api/pro/list').then(res => res.json()).then(res => {



      // console.log(res);
      dispatch({
        type: 'change-pro-list',
        payload: res.data.map(item => {
          return (<li key={item.proid}>{item.proname}</li>)
        })
      })
    })
  }, [])



  return (
    <div>
      {
        state.bannerList.length > 0 && state.bannerList.map(item => (<div key={item.bannerid}>
          <img src={item.img} style={{width: 100}} alt="" />
          </div>))
      }

      <ol>
        {state.proList}
      </ol>


    </div>
  );
};

export default App;
